import React from 'react';
import {Button} from 'antd';
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import createLinkifyPlugin from 'draft-js-linkify-plugin';
import createToolbarPlugin from 'draft-js-static-toolbar-plugin';
import createImagePlugin from 'draft-js-image-plugin';
import createAlignmentPlugin from 'draft-js-alignment-plugin';
import createFocusPlugin from 'draft-js-focus-plugin';
import createResizeablePlugin from 'draft-js-resizeable-plugin';
import createBlockDndPlugin from 'draft-js-drag-n-drop-plugin';
import DraftJSPluginsEditor, {composeDecorators} from 'draft-js-plugins-editor'; // draft-js-plugins编辑器
import {
//	Editor as DraftEditor, 
	EditorState, 
	convertFromRaw, 
	convertToRaw, 
	ContentState,
	convertFromHTML,
} from 'draft-js';
import {
  	ItalicButton,
  	BoldButton,
  	UnderlineButton,
  	CodeButton,
	HeadlineOneButton,
  	HeadlineTwoButton,
  	HeadlineThreeButton,
  	UnorderedListButton,
	OrderedListButton,
  	BlockquoteButton,
} from 'draft-js-buttons';
import {stateFromHTML} from 'draft-js-import-html';
import {stateToHTML} from 'draft-js-export-html';
import 'draft-js-hashtag-plugin/lib/plugin.css';
import 'draft-js-static-toolbar-plugin/lib/plugin.css';
import style from './css/Editor.css';

// hashtag
const hashtagPlugin = createHashtagPlugin();
// linkify
const linkifyPlugin = createHashtagPlugin();
// tool bar
const staticToolbarPlugin = createToolbarPlugin({
	structure: [
		ItalicButton,
	  	BoldButton,
	  	UnderlineButton,
	  	CodeButton,
		HeadlineOneButton,
	  	HeadlineTwoButton,
	  	HeadlineThreeButton,
	  	UnorderedListButton,
		OrderedListButton,
	  	BlockquoteButton,
	]
});
const {Toolbar} = staticToolbarPlugin;
// image
const focusPlugin = createFocusPlugin();
const resizeablePlugin = createResizeablePlugin();
const blockDndPlugin = createBlockDndPlugin();
const alignmentPlugin = createAlignmentPlugin();
const {AlignmentTool} = alignmentPlugin;
const decorator = composeDecorators(
	resizeablePlugin.decorator,
	alignmentPlugin.decorator,
	focusPlugin.decorator,
  	blockDndPlugin.decorator,
);
const imagePlugin = createImagePlugin({decorator});

const plugins = [
	hashtagPlugin,
	linkifyPlugin,
	staticToolbarPlugin,
	focusPlugin,
	resizeablePlugin,
	blockDndPlugin,
	alignmentPlugin,
	imagePlugin,
];

class Editor extends React.Component {
	
	constructor(...args) {
		super(...args);
		this.state = {
			editorState: EditorState.createWithContent(stateFromHTML(this.props.defaultHtml || '')),// 绑定默认值 this.props.defaultHtml
		};
		this.onChange = this.onChange.bind(this);
		this.focus = this.focus.bind(this);
	}
  	
  	// 修改状态
	onChange(editorState) {
		this.props.onChange && this.props.onChange(stateToHTML(editorState.getCurrentContent()));
		return this.setState({
			editorState: editorState
		});
	}
	
	// 聚焦函数
	focus() {
		this.refs.editor.focus();
	}
	
	render() {
		return (
	    	<div className={'editorContainer ' + style.editor + ' ' + this.props.className} onClick={this.focus}>
	    		<div className={style.editorBody}>
	        		<DraftJSPluginsEditor 
	        		ref='editor' 
	        		readOnly={this.props.readOnly} 
	        		editorState={this.state.editorState} 
	        		onChange={this.onChange} 
	        		plugins={plugins}
	        		onFocus={this.props.onFocus} />
	        	</div>
	        </div>
		);
	}
  
}

Editor.Toolbar = Toolbar;

export default Editor;